<template>
    <div class="common-layout">
        <el-container>
            <el-header class="check-header">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item>
                        <el-input v-model="searchForm.carNumber" placeholder="请输入车牌号" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="searchForm.status" size="large" placeholder="选择状态">
                            <el-option value="0" label="未处理"></el-option>
                            <el-option value="1" label="已处理">已处理</el-option>
                        </el-select>
                    </el-form-item>
                    <el-date-picker v-model="value" type="daterange" range-separator="到" start-placeholder="开始日期"
                        end-placeholder="结束日期" size="large" style="margin-top: -18px;" />

                    <el-form-item>
                        <el-button type="primary" @click="handleSearch(value)">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="checkData" stripe style="width: 100%">
                    <el-table-column prop="id" label="检查单号" />
                    <el-table-column prop="carName" label="车名" />
                    <el-table-column prop="username" label="用户名" />
                    <el-table-column prop="carNumber" label="车牌号" />
                    <el-table-column prop="error" label="异常信息" />
                    <el-table-column prop="score" label="检查得分" />
                    <el-table-column prop="checkDate" label="创建时间" />
                    <el-table-column label="状态">
                        <template #default="scope">
                            <el-text style="color: #2fdd2f;">{{ scope.row.status == '0' ? '未处理' : '已处理' }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button link style="width: 40px;margin-left: 0px;" type="primary" size="large"
                                @click="handleEditOrder(scope.row.id)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagination-centered" v-model:current-page="searchForm.currentPage"
                    v-model:page-size="searchForm.pageSize" :page-sizes="[5, 10, 15, 20]" :small="false"
                    :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                    :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { getCheckPage } from '@/api';
import { ElMessage,DatePickerValue } from 'element-plus';

// 定义对象结构接口，只定义类型不赋初始值
interface Check {
    id: string;
    carName: string;
    carNumber: string;
    error: string;
    score: number;
    checkDate: string;
    status: string;
}

// 列表数据
let checkData = ref<Check[]>([]);

// 总页数
let counts = ref(0);

const value = ref<DatePickerValue>([])

// 定义搜索表单数据模型
let searchForm = reactive({
    carNumber: '',
    startDate: '',
    endDate: '',
    status: '',
    currentPage: 1,
    pageSize: 5,
});

// 查询处理函数
const handleSearch = (value: DatePickerValue) => {
    if (value.length == 2) {
        searchForm.startDate = value[0].toISOString()
        searchForm.endDate = value[1].toISOString()
    }
    getCheckPage(searchForm).then(async (res: { data: any }) => {
        let resData = res.data.data;
        if (res.data.code === 50041) {
            // 更新列表
            checkData = resData.records;
            // 更新总页数
            counts.value = resData.total;
            // 使用nextTick确保DOM已更新
            await nextTick();
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error',
            });
        }
    });
};

// 初始化方法
const init = () => {
    // 发送分页查询请求
    getCheckPage(searchForm).then((res: { data: any }) => {
        let resData = res.data.data;
        if (res.data.code === 50041) {
            // 更新列表
            checkData.value = resData.records;
            // 更新总页数
            counts.value = resData.total;
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error',
            });
        }
    });
};

// 编辑订单信息
const handleEditOrder = (id: string) => {
    // 发送消息给父窗口，告知要改变页面
    window.parent.postMessage(
        { action: 'changePage', url: '/#/check/edit?id=' + id },
        '*'
    );
};

// 在组件挂载时初始化数据
onMounted(() => {
    init();
});

// 监听页大小改变
const handleSizeChange = (val: number) => {
    searchForm.pageSize = val;
    init();
};

// 监听当前页改变
const handleCurrentChange = (val: number) => {
    searchForm.currentPage = val;
    init();
};
</script>

<style scoped>
.pagination-centered {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* 根据需要调整间距 */
}

.el-form-item {
    min-width: 150px;
}

.el-form {
    margin-top: 20px;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.check-header {
    overflow: hidden;
}
</style>